<template>
  <div id="productMainHead">
    <div class="grid-1122 clearfix pr">
      <Row :gutter="16">
        <Col span="16">
          <div class="pro-head-adv">
            <img src="../../assets/pro-head-img.png" alt="战略投资"/>
          </div>
        </Col>
        <Col span="8">
          <div class="pro-head-recommend center pr">
            <span class="title">新款推荐</span>
            <br>
            <span class="name">【e鑫】恒慧进取型</span>
            <br>
            <span class="rate">13.8%</span>
            <br>
            <span class="desc">历史最高收益率</span>
            <div class="buy-btn clearfix">
              <a>
                立即抢购
              </a>
            </div>

          </div>
        </Col>
      </Row>
      <Row :gutter="16">
        <Col span="8">
          <div class="pro-item-box clearfix pr">
            <div class="fl">
              <span class="name">理财优选-期限 28天</span>
              <br/>
              <span class="rate">4.30</span>%
              <br/>
              <span class="desc">业绩比较基准</span>
            </div>
            <div class="clearfix fr">
                <a class="buy-btn"> 立即抢购 </a>
            </div>
          </div>
        </Col>
        <Col span="8">
          <div class="pro-item-box">
            <div class="fl">
              <span class="name">理财优选-期限 68天</span>
              <br/>
              <span class="rate">4.30</span>%
              <br/>
              <span class="desc">业绩比较基准</span>
            </div>
            <div class="clearfix fr">
              <a class="buy-btn"> 立即抢购 </a>
            </div>
          </div>
        </Col>
        <Col span="8">
          <div class="pro-item-box">
            <div class="fl">
              <span class="name">理财优选-期限 158天</span>
              <br/>
              <span class="rate">4.30</span>%
              <br/>
              <span class="desc">业绩比较基准</span>
            </div>
            <div class="clearfix fr">
              <a class="buy-btn"> 立即抢购 </a>
            </div>
          </div>
        </Col>
      </Row>
    </div>
  </div>
</template>
<script>
  export default {
    name: 'product-main-head'
  }
</script>
<style>
  #productMainHead{
    min-height: 480px;
    background: rgba(0, 0, 0, 0) url("../../assets/pro-head-bg.png") no-repeat;
    background-size: 100% 470px;
  }

  #productMainHead .pro-head-adv img {
    height: 330px;
    width: auto;
  }
  #productMainHead .pro-head-recommend {
    background: -webkit-gradient(linear,0 0,0 100%,from(#FF6D03),to(#F82B3A));
    height: 330px;
    filter:alpha(opacity=90 finishopacity=0 style=1 startx=0,starty=5,finishx=90,finishy=60);
    color: #fff;
    padding: 40px;
  }

  #productMainHead .pro-head-recommend .title {
    font-size: 35px;
    font-weight: 700;
  }
  #productMainHead .pro-head-recommend .name {
    line-height: 30px
  }
  #productMainHead .pro-head-recommend .rate {
    font-size: 46px;
    font-weight: 700;
  }
  #productMainHead .pro-head-recommend .desc {
    font-weight: 700;
    line-height: 28px;
  }

  #productMainHead .pro-head-recommend .buy-btn {
    position: absolute;
    bottom: 50px;
    left: 30%;
  }
  #productMainHead .pro-head-recommend a {
    font-weight: 700;
    border: 1px solid #fff;
    padding: 10px 48px;
    font-size: 15px;
    color:#fff;
  }

  #productMainHead .pro-item-box {
    width: 100%;
    padding: 20px;
    height: 150px;
    background: -webkit-gradient(linear,0 0,0 100%,from(#fff),to(#F0F7FF));
    filter:alpha(opacity=90 finishopacity=0 style=1 startx=0,starty=5,finishx=90,finishy=60);
    box-shandow: 5px 5px 10px #F0F7FF;
  }

  #productMainHead .pro-item-box .buy-btn {
    padding:10px 40px;
    color: #fff;
    border: 1px solid #F82B3A;
    background: #F82B3A;
    font-size: 15px;
    border-radius: 3px;
  }
  #productMainHead .pro-item-box div {
    height: 100%;
  }
  #productMainHead .pro-item-box .name {
    font-weight: 700;
    font-size: 15px;
    line-height: 40px;
  }
  #productMainHead .pro-item-box .rate {
    font-size: 35px;
    font-weight: 700;
    color: #FF6D03;
  }
  #productMainHead .pro-item-box .desc {
    color: #AFAFB1;
    font-weight: 700;
  }

  #productMainHead .pro-item-box .fr {
    margin: 50px 0 0 0 ;
  }
</style>
